<template>
    <div class="container">
        <div class="header">
            <div class="title">公域任务列表</div>
            <el-button
                style="margin-left: 30px;"
                @click.prevent="handleAdd"
                type="primary"
                plain
                size="medium"
                v-permission="{ permission: '创建公域任务', type: 'disabled' }"
            >创建公域任务</el-button>
        </div>
        <el-table stripe v-loading="loading" :data="tableData">
            <el-table-column fixed="left" prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="put_title" label="发布主题" width="200"></el-table-column>
            <el-table-column prop="get_title" label="领取标题" width="200"></el-table-column>
            <el-table-column prop="project_id" label="项目ID"></el-table-column>
            <el-table-column prop="end_time" label=截止日期 width="150"></el-table-column>
            <el-table-column prop="expected_time" label="预计完成时间" width="150"></el-table-column>
            <el-table-column prop="is_getting" label="是否领取">
                <template slot-scope="scope">{{ scope.row.is_getting | onIsGetting }}</template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template v-if="scope.row.status" slot-scope="scope">{{ scope.row.status | onStatus }}</template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="150"> </el-table-column>
            <el-table-column fixed="right" width="150" label="操作">
              <template slot-scope="scope">
                <el-button @click.prevent="handleEdit(scope.row)" type="primary" plain size="mini">编辑</el-button>
                <el-button
                  v-permission="{ permission: '删除公域任务', type: 'disabled' }"
                  @click.prevent="handleDelete(scope.row)"
                  type="danger"
                  size="mini"
                  plain
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :background="true"
              :page-size="pageCount"
              :current-page="currentPage"
              v-if="refreshPagination"
              layout="prev, pager, next, jumper"
              :total="totalNums"
            ></el-pagination>
          </div>
          <create-edit 
            v-if="dialogFormVisible"
            :dialogFormVisible="dialogFormVisible"
            :isCreate="isCreate" 
            :commonJobId="commonJobId"
            @dialogClose="dialogClose"
          ></create-edit>
    </div>
</template>
<script>

import CommonJobModel from '@/model/common-job'
import createEdit from './create-edit'

    export default {
        components: {
            createEdit
        },
        data() {
            return {
                tableData: [],
                loading: false,
                dialogFormVisible: false,
                isCreate: false,
                commonJobId: 0,
                pageCount: 10,
                currentPage: 1,
                totalNums: 0,
                refreshPagination: true,
            }
        },
        async created() {
            this.loading = true
            this.getLists()
            this.loading = false
        },
        methods: {
            async getLists() {
                const page = this.currentPage - 1
                const count = this.pageCount
                const res = await CommonJobModel.getAll(page, count)
                this.tableData = res.items
                this.totalNums = res.total
            },
            handleAdd() {
                this.isCreate = true
                this.dialogFormVisible = true
            },
            handleEdit(val) {
                this.isCreate = false
                this.dialogFormVisible = true
                this.commonJobId = val.id
            },
            async handleCurrentChange(val) {
                this.currentPage = val
                this.loading = true
                this.getLists()
                this.loading = false
            },
            async handleDelete(val) {
                let res
                this.$confirm('此操作将永久删除该公域任务，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    try {
                        this.loading = true
                        res = await CommonJobModel.delete(val.id)
                    } catch (e) {
                        this.loading = false
                    }
                    if (res.code < window.MAX_SUCCESS_CODE) {
                        this.loading = false
                    if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
                        this.currentPage--
                    }
                        this.getLists()
                        this.$message({
                            type: 'success',
                            message: `${res.message}`,
                        })
                    } else {
                        this.loading = false
                        this.$message.error(`${res.message}`)
                    }
                })
            },
            async dialogClose() {
                this.dialogFormVisible = false
                this.loading = true
                this.getLists()
                this.loading = false
            },
        },
        filters: {
            onIsGetting(val) {
                return val ? '是' : '否'
            },
            onStatus(val) {
                const obj = {
                    1: "未开始",
                    2: "已结束",
                    3: "进行中"
                }
                return obj[val]
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '@/assets/style/list'
</style>